<template>
  <!-- 考勤管理 -->
  <view class="statistics-container">
    <view class="custom-tabs" :style="tabsContainerStyle">
      <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === index }"
        @click="handleTabClick(index)" :style="getTabStyle(index)">
        {{ tab.name }}
      </view>
    </view>

    <view class="ment">
      <view class="scroll-content">
        <view class="content-item">
          <AttendanceGlobalSettings v-if="activeTab == 0"></AttendanceGlobalSettings>
          <Attendancepersonalsettings v-if="activeTab == 1"></Attendancepersonalsettings>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
import AttendanceGlobalSettings from "./AttendanceGlobalSettings.vue";
import Attendancepersonalsettings from "./Attendancepersonalsettings.vue";
const activeTab = ref(0);
const prevTab = ref(0);
const direction = ref('left');
const tabs = ref([
  { name: "全局设置" },
  { name: "个人设置" }
]);

const handleTabClick = (index) => {
  // direction.value = index > activeTab.value ? 'right' : 'left';
  // prevTab.value = activeTab.value;
  // activeTab.value = index;
};

// 动态计算下划线位置 
const tabsContainerStyle = computed(() => ({
  '--prev-index': prevTab.value,
  '--current-index': activeTab.value
}));

// 获取单个tab的样式 
const getTabStyle = (index) => ({
  '--tab-index': index
});
</script>

<style lang="scss" scoped>
.statistics-container {
  width: 100%;
  height: 100%;

  .ment {
    height: 83vh;
    padding-top: 45px;

    .scroll-content {
      width: 100%;
      box-sizing: border-box;

      .content-item {
        word-break: break-all;
        padding: 10px;
      }
    }
  }
}

.custom-tabs {
  display: flex;
  position: fixed;
  border-bottom: 1px solid #eee;
  z-index: 10;
  height: 48px;
  width: 100%;
  background-color: #ffffff;
  top: 70px;

  .tab-item {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    color: #666;
    transition: color 0.3s ease;
    position: relative;

    &.active {
      color: #000;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%; // 缩小下划线宽度[4]()
        height: 2px;
        background: #007AFF;
        transform-origin: center;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

        /* 动态方向动画 */
        animation: underlineSlide 0.3s forwards;
        transform: translateX(calc((var(--current-index) - var(--prev-index)) * 40% // 根据宽度调整位移量 
            ));
      }
    }
  }
}

@keyframes underlineSlide {
  0% {
    transform:
      translateX(calc((var(--prev-index) - var(--current-index)) * 100%)) scaleX(0.5); // 初始缩小效果[6]()
  }

  50% {
    transform: translateX(0) scaleX(1.2); // 弹性效果 
  }

  100% {
    transform:
      translateX(0) scaleX(1); // 恢复原始比例 
  }
}
</style>